<template lang="html">
  <div id="pageBox">
    <div class="formBox">
      <div class="formItem pd14">
        <div class="itemName">
          手机号
        </div>
        <div class="itemText">
          <input type="tel" v-model="formData.phoneNum" placeholder="请输入手机号">
        </div>
      </div>
      <div class="formItem pd14">
        <div class="itemName">
        验证码
        </div>
        <div class="itemText">
          <input type="tel" v-model="formData.phoneNum" placeholder="请输入短信验证码">
        </div>
        <div class="itemBtn">
          <span class="btn" :class="{disabled:yzmIng}" @click="getCode">{{yzmText}}</span>
        </div>
      </div>
      <div class="formItem pd14">
        <div class="itemName">
          微信账号
        </div>
        <div class="itemText">
          <input type="tel" v-model="formData.phoneNum" placeholder="请输入微信账号">
        </div>
      </div>
      <div class="formItem pd14">
        <div class="itemName">
          直播间名称
        </div>
        <div class="itemText">
          <input type="tel" v-model="formData.phoneNum" placeholder="请输入直播间名称(6字以内)">
        </div>
      </div>
      <div class="formItem pd14">
        <div class="itemName">
          直播间简介
        </div>
        <div class="itemText">
          <textarea name="name" maxlength="50" placeholder="请输入直播间简介(50字以内)"></textarea>
        </div>
      </div>
    </div>
    <div class="submitBtn">
      提交
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      formData:{
        phoneNum:""
      },
      yzmIng:false,
      yzmText:"请输入验证码"
    }
  },
  methods:{
    getCode(){
      if(this.yzmIng) return;
      this.yzmIng = true;
      let time = 5;
      this.yzmText = time + "s";
      let timer = setInterval(()=>{
          time--;
          this.yzmText = time + "s";
          if(time == 0){
            this.yzmText = "请输入验证码";
            this.yzmIng = false;
            clearInterval(timer);
          }
      },1000)
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    .formBox{
      background: #fff;
      .formItem{
        display: flex;
        min-height:0.54rem;
        line-height: 0.54rem;
        border-bottom:1px solid #f4f4f4;
        .itemName{
          width:1rem;
          font-size:0.14rem;
        }
        .itemText{
          flex:1;
          input{
            width:100%;
            height:100%;
            background:transparent;
            border:0;
            font-size:0.14rem;
          }
          textarea{
            width:100%;
            border:0;
            font-size:0.14rem;
            height:1rem;
            padding-top:0.15rem;
          }
        }
        .itemBtn{
          .btn{
            display: inline-block;
            background:#31c27c;
            color:#fff;
            width:1.1rem;
            height:0.36rem;
            line-height: 0.36rem;
            text-align: center;
            border-radius: 0.18rem;
            font-size:0.14rem;
          }
        }
      }
    }
    .submitBtn{
      width:100%;
      height:0.48rem;
      background:#31c27c;
      color:#fff;
      text-align: center;
      line-height: 0.48rem;
      font-size:0.16rem;
      margin-top:0.1rem;
    }
    .disabled{
      background:#dedede !important;
    }
  }
</style>
